import React, { useEffect, useState } from 'react';
import { Bar } from '@ant-design/charts';
import { getStockOutAmountSummaryByWarehouse } from '@/services/echart/api';
import {Card} from "antd";
import {type ProColumns, ProTable} from "@ant-design/pro-components";

const StockOutAmountChart: React.FC = () => {
  const [data, setData] = useState<API.StockOutAmountSummaryByWarehouse[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await getStockOutAmountSummaryByWarehouse();
        if (response && response.data) {
          setData(response.data);
        }
      } catch (error) {
        console.error('Failed to fetch stock out amount data:', error);
      }
    };

    fetchData();
  }, []);

  const config = {
    data,
    xField: 'warehouseName',
    yField: 'totalStockOutAmount',
    seriesField: 'warehouseName',
    shapeField: 'hollow',
    legend: {
      position: 'top-left',
    },
    color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
    label: {
      position: 'middle',
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    shape: 'roundBar',
    interactions: [
      {
        type: 'element-active',
      },
    ],
  };
  const columns: ProColumns<API.StockOutAmountSummaryByWarehouse>[] = [
    {
      title: '仓库名',
      hideInSearch: true,
      width: 120,
      editable: false,
      dataIndex: 'warehouseName',
    },
    {
      title: '出库金额',
      hideInSearch: true,
      width: 120,
      editable: false,
      dataIndex: 'totalStockOutAmount',
    },
  ];
  return <>
    <Card title={"历史出库金额仓库汇总"}>
      <Bar {...config} />
    </Card>
    <ProTable<API.StockOutAmountSummaryByWarehouse>
      columns={columns}
      cardBordered
      dataSource={data}
      searchFormRender={() => <></>}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      headerTitle="商品出库数量"
    />
  </>;
};

export default StockOutAmountChart;
